<template>
  <div class="el-tree-select" style="width:100%">
    <el-cascader ref="chapterCascader"
                 size="large"
                 :options="chapterOptions"
                 v-model="chapterIds"
                 :props="chapterProp"
                 :show-all-levels="true"
                 filterable
                 placeholder="请选择章节">
    </el-cascader>
  </div>
</template>

<script setup lang="ts">
import {queryChapterList} from "@/api/train/chapter";
import {nextTick, watch} from "@vue/runtime-core";
import {getCurrentInstance, ref} from "vue";

const emits = defineEmits(["getChapterIds"])

const { proxy } = getCurrentInstance()
// 章节中选择章节的章节数组数据
const chapterOptions = ref([]);
// 新建章节下拉框配置信息
const chapterProp = ref({
  expandTrigger: 'click',
  checkStrictly: true,
  value: "chapterId",
  label: "chapterName",
  children: "childrenList"
})

const chapterIds = ref([])
const props = defineProps({
  lessonId: {
    required: true,
    type: Number
  },
  chapterIds: {
    type: Array,
    default: []
  }
})

function queryList() {
    queryChapterList(props.lessonId).then(response => {
        let chapterList = response.data
        disableChapterCascaderData(chapterList, [])
        chapterOptions.value = chapterList;
    })
}

// 对数据进行禁用操作
const disableChapterCascaderData = (data, disableArray) => {
    for (let i = 0; i < data.length; i++) {
        let chapter = data[i]
    }
}

//监听数据变化
watch(
    () => chapterIds.value,
    () => {
      emits("getChapterIds", chapterIds.value)
    },
    {immediate: true}
)

watch(
    () => props.chapterIds,
    () => {
      chapterIds.value = props.chapterIds
    },
    {immediate: true}
)

nextTick(()=>{
  chapterIds.value = props.chapterIds
})

queryList();

defineExpose({queryList})
</script>

<style lang='scss' scoped>
:deep(.el-cascader--large){
  width:100%
}
</style>
